<template>
  <div class="login-container fr">
    <!--标题头-->
    <div class="title">
      <span>欢迎登录品牌网</span>
      <span>还没账号？</span>
      <router-link to="/register" class="go_register">马上注册</router-link>
    </div>
    <!--登录表单-->
    <div class="login-form">
      <ul class="option">
        <li class="active" data-id="0" @click="changeLoginType">普通账号登录</li>
        <li data-id="1" @click="changeLoginType">手机动态密码登录</li>
      </ul>
      <!--登录名-->
      <input type="text" id="phone" v-model="form.phone" placeholder="手机号码">
      <div class="change">
        <!--密码-->
        <input type="password" id="password" v-model="form.password" placeholder="登录密码">
        <!--验证码-->
        <div class="vcode clearfix">
          <input type="text" id="code" placeholder="手机验证码" v-model="form.code" class="code-input">
          <img :src="code" width="120" height="44" class="fr" @click="refleshCode">
        </div>
        <input type="button" class="get-code check-code hidden fr" value="获取验证码">
        <p class="code-error">{{message}}</p>
      </div>
      <button type="submit" class="do-event" id="login-sub" @click="toLogin">立即登录</button>
    </div>
    <!--第三方登录-->
    <div class="otherlogin">
      <div class="forget">
        <span>忘记密码了，</span>
        <a href="">点击找回</a>
      </div>
      <p>——第三方登录——</p>
      <div class="loginicon">
        <a href=""><i class="iconfont icon-qq"></i></a>
        <a href=""><i class="iconfont icon-weixin"></i></a>
        <a href=""><i class="iconfont icon-weibo"></i></a>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import {getCode} from '../../api/user'
export default {
  name: 'SinginComponent',
  mounted () {
    this.init()
  },
  data () {
    return {
      code: '',
      requestUrl: '',
      form: {
        account: '',
        password: '',
        code: ''
      },
      message: '',
      urlPath: '',
      operationName: ''
    }
  },
  methods: {
    ...mapActions([
      'handleLogin'
    ]),
    /**
     * 验证码刷新
     */
    refleshCode: function () {
      this.init()
    },
    /**
     * 提交登录
     */
    toLogin: function () {
      if (this.form.phone.trim() === '') {

      }
      // 提交登录
      let obj = this.form
      this.handleLogin(obj).then(res => {
        console.log('handleLogin#')
        console.log(res)
        console.log(this.$router)
        console.log(this.$config.homeName)
        this.$router.push({
          path: '/home/',
          name: 'Home'
        })
      })
    },
    /**
     * 初始化
     * @returns {Promise<void>}
     */
    init: async function () {
      let path = this.$route.path
      if (path.indexOf('login') > -1) {
        this.urlPath = '/register'
        this.operationName = '马上注册'
      } else {
        this.urlPath = '/login'
        this.operationName = '马上登录'
      }
      const promise = await getCode()
      console.log(promise)
      this.code = promise.codeImage
      this.requestUrl = promise.codeUrl
    },
    /**
     * 切换登录
     * @param ev
     */
    changeLoginType: function (ev) {
      ev = arguments[0] || event
      let target = ev.target || ev.srcElement
      let id = parseInt(target.dataset.id)
      let siblings = target.parentNode.children
      let password = document.getElementById('password')
      for (let i = 0; i < siblings.length; i++) {
        siblings[i].className = ''
      }
      if (id === 0) {
        password.style.display = 'block'
      } else {
        password.style.display = 'none'
      }
      target.className = 'active'
      this.init()
    }
  }
}
</script>

<style scoped>

</style>
